<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue列表渲染</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <!-- 用v-for把一个数组对应为一组元素 -->
    <ul id="example-1">
        <li v-for="item in items" :key="item.message">
            {{ item.message }}
        </li>
    </ul>
    <ul id="example-2">
        <li v-for="(item, index) of items">
            {{ parentMessage }} - {{ index }} - {{ item.message }}
        </li>
    </ul>
    <!-- 在v-for里使用对象 -->
    <ul id="v-for-object" class="demo">
        <li v-for="value in object">
            {{ value }}
        </li>
        <div v-for="(value, name) in object">
            {{ name }}: {{ value }}
         </div>
         <div v-for="(value, name, index) in object">
            {{ index }}. {{ name }}: {{ value }}
         </div>
    </ul>
    <!-- 显示过滤/排序后的结果 -->
    <div id="example-3">
        <li v-for="n in evenNumbers">{{ n }}</li>
    </div>
    <div id="example-4">
        <ul v-for="set in sets">
            <li v-for="n in even(set)">{{ n }}</li>
        </ul>
        <!-- 在v-for里使用范围值 -->
        <div>
            <span v-for="n in 10">{{ n }}</span>
        </div>
    </div>
    <!-- 在<template>上使用v-for -->
        <div id="example-5">
            <ul>
                <template v-for="item in items">
                    <li :class="{active: isActive}">{{ item.msg }}</li>
                    <li  role="presentation" :class="{active: isActive, separator: isDivider}"></li>
                </template>
            </ul>
        </div>
</body>
<script type="text/javascript">
    const example1 = new Vue({
        el: '#example-1',
        data: {
            items: [
                { message: 'Foo' },
                { message: 'Bar' }
            ]
        }
    })
    const example2 = new Vue({
        el: '#example-2',
        data: {
            parentMessage: 'Parent',
            items: [
                { message: 'Foo' },
                { message: 'Bar' }
            ]
        }
    })
    const object = new Vue({
        el: '#v-for-object',
        data: {
            object: {
                title: 'How to do lists in Vue',
                author: 'Jane Done',
                publishedAt: '2016-04-10'
            }
        }
    })
    //替换数组
    // example1.items = example1.items.filter(function (item){
    //     return item.message.match(/Foo/)
    // })
    // 显示过滤/排序后的结果
    const example3 = new Vue({
        el: '#example-3',
        data: {
            numbers: [1,2,3,4,5,6,7]
        },
        computed: {
            evenNumbers: function() {
                return this.numbers.filter(function (number){
                    return number % 2 === 0
                })
            }
        }
    })
    // 当计算属性不适用的情况下
    const example4 = new Vue({
        el: '#example-4',
        data: {
            sets: [[1,2,3,4,5],[6,7,8,9,10]]
        },
        methods: {
            even: function(numbers){
                return numbers.filter(function(number){
                    return number % 2 === 0
                })
            }
        }
    })
    //在<template>上使用v-for
    const example5 = new Vue({
        el: '#example-5',
        data: {
            isActive: true,
            isDivider: true,
            items: [
                {msg: '中国'},
                {msg: '上海'},
                {msg: '北京'},
                {msg: '苏州'},
                {msg: '厦门'},
                {msg: '林州'},
                {msg: '江西'}
            ]
        }

    })
</script>
<style>
    .active{
        list-style-type: none;
    }
</style>
</html>